<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
import service from "../../../utils/service";
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
  // () => {
  //   init()
  // },
  () => {
    service({
      url: "/data/kData",
    }).then(res => {
      if (res.data.code == 200) {
        arr.push(...res.data.data.x)
        res.data.data.val.forEach((element: any) => {
          arr1.push(...element)
          console.log(...element);
        });
      }
    }).then(() => {
      init()
    })
  }
)
const arr: any = [];
const arr1: any = [];
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '商品数量统计图'
    },
    tooltip: {
      trigger:"axis"
    },
    legend: {
      data: ['袜子','内裤','秋裤','手套']
    },
    xAxis: {
      data: arr
      //  ['2021-11-15', '2021-11-16', '2021-11-17', '2021-11-18']
    },
    yAxis: {
    },
    toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
    series: [
      {
        name: '袜子',
        type: 'line',
        data: arr1.splice(0, 4)
        // [20, 34, 10, 38]
      },
      {
        name: '内裤',
        type: 'line',
        data: arr1.splice(0, 4)
        // [20, 34, 10, 38]
      },
      {
        name: '秋裤',
        type: 'line',
        data: arr1.splice(0, 4)
        // [20, 34, 10, 38]
      },
      {
        name: '手套',
        type: 'line',
        data: arr1.splice(0, 4)
        // [20, 34, 10, 38]
      },
    ],
    // color:"red",
    backgroundColor: "pink",
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<template>
  <div ref="main" style="width:80%; height: 350px" class="box"></div>
</template>

<style scoped>
</style>


